<template>
	<view class="page">
		<view class="item">
			<text class="title" v-show="type!='机构'">姓名</text>
			<text class="title" v-show="type=='机构'">管理员姓名</text>
			<view class="content">
				<input type="text" v-model="form.name" value="请输入您的姓名" placeholder="请输入您的姓名" />
			</view>
		</view>
		<view class="item">
			<text class="title">性别</text>
			<view class="content">
				<picker mode="selector" :value="form.gender" :range="genderOption" :range-key="'text'"
					@change="bindGenderChange">
					<view class="picker">{{genderOption[index].text ?genderOption[index].text:'请选择您的性别'}}</view>
				</picker>
			</view>
		</view>
		<view class="item">
			<text class="title">出生年月</text>
			<view class="content">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view>{{date}}</view>
				</picker>
			</view>
		</view>

		<view class="item" v-show="type!='机构'">
			<text class="title">所属机构</text>
			<view class="content" @click="jumpToInstitution()">
				{{form.institution?form.institution:'点击以搜索机构'}}
			</view>
		</view>
		<view class="item">
			<text class="title">手机号</text>
			<view class="content">
				<input type="number" v-model="form.phone" placeholder="请输入您的手机号" maxlength="11" />
			</view>
		</view>
		<view class="item">
			<text class="title">个人简介</text>
			<view class="content">
				<input type="text" v-model="form.introduction" placeholder="请输入您的个人简介" />
			</view>
		</view>
		<view>

			<button class="sbutton" type="default" hover-class="button-hover" @click="submit()">保存</button>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				index:0,
				type: getApp().globalData.userInfo.type,
				date: currentDate,
				genderOption: [{
						value: 0,
						text: '男'
					},
					{
						value: 1,
						text: '女'
					}
				],
				form: {
					openId:getApp().globalData.userInfo.openId,
					name: getApp().globalData.userInfo.realName, //姓名
					gender: getApp().globalData.userInfo.gender,//性别
					birthday: getApp().globalData.userInfo.birthday, //生日，出生年月
					phone: getApp().globalData.userInfo.phone, //手机号
					institution: getApp().globalData.userInfo.institution, //机构
					institutionId: getApp().globalData.userInfo.institutionId, //机构
					introduction: getApp().globalData.userInfo.introduction, //个人简介
					address: '',
					location: {
						latitude: '',
						longitude: ''
					}
				}
			}
		},
		created(){
			this.getInformation();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindGenderChange: function(e) {
				this.form.gender = e.target.value;
				// this.index = e.target.value;
				// console.log(this.form.gender);
			},
			bindDateChange: function(e) {
				this.date = e.target.value;
				this.form.birthday = this.date;
				// console.log(this.date);
			},

			getDate: function(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getInformation:function(){
				cloudbase.callFunction({
				
					name: "getUserInfo",
					data: {
						openId: this.form.openId
					}
				}).then(res => {
					let list = res.result.data;
					if(list.length != 0){
						
							Object.assign(getApp().globalData.userInfo, list[0]);
							// console.log(getApp().globalData.userInfo);
					}
				})
			},
			jumpToInstitution: function() {
				uni.navigateTo({
					url: "../institution/institution"
				})
			},
			submit:function(){
				if(this.form.name==''||this.form.gender == ''||this.form.birthday==''||this.form.phone==''||this.form.institution==''||this.form.introduction == '' ){
					uni.showToast({
						title:'请将信息填写完毕',
						icon:'none'
					})
				}
				else{
					
					cloudbase.database().collection('user').where({openId:this.form.openId}).update({
							realName:this.form.name,
							gender:this.form.gender,
							birthday:this.form.birthday,
							phone:this.form.phone,
							introduction:this.form.introduction,
							institution:this.form.institution,
							institutionId:this.form.institutionId
					}).then(res=>{
						console.log(res);
						if(res.updated == 1){
							uni.showToast({
								title:'保存成功'
							})
							uni.navigateBack({
								delta:1
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	.page {

		width: 750rpx;
		height: 1334rpx;
		/* height: 1020rpx; */
		padding-bottom: 60px;
		background-color: #F3F5F7;
	}

	.item {
		width: 622rpx;
		height: 133rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;

	}

	.title {
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 15rpx;

		/* margin-left: 64rpx; */
		/* margin-right: 64rpx; */

	}

	.content {
		width: 622rpx;
		height: 92rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, .05);
		border-radius: 16rpx;
		/* margin-left: 64rpx; */
		/* margin-right: 64rpx; */
		line-height: 92rpx;
		font-size: 14px;
		padding-left: 14px;
		color: #A2A2A2;
	}

	.content input {
		height: 92rpx;
		line-height: 92rpx;

		color: #A2A2A2;
	}

	.sbutton {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		width: 200rpx;
		height: 96rpx;
		background-color: #FD973F !important;
		border-radius: 20px;
		color: #FFFFFF !important;
		margin-top: 68rpx;
	}

	.button-hover {
		background-color: rgba(0, 0, 0, 0.1) !important;
		opacity: 0.7;
	}
</style>
